import {createStyles, Progress} from '@mantine/core';
import React, {JSXElementConstructor, ReactElement} from 'react';

const useStyles = createStyles((theme, _params, _getRef) => ({
    root: {
        backgroundColor: theme.primaryColor,
        position: 'fixed',
        top: 0,
        left: 0,
        zIndex: 1301,
        width: '100%',
    },
}));

const LoaderWrapper = (props: { children: ReactElement<any, string | JSXElementConstructor<any>> }) => {
    const {classes} = useStyles();
    return <div className={classes.root}>{props.children}</div>;
};

// ==============================|| LOADER ||============================== //
const Loader = () => (
    <LoaderWrapper>
        <Progress size="sm" value={100} striped />
    </LoaderWrapper>
);

export default Loader;
